// 定义一个Vue插件：插件的本质就是对象，对象中需要有一个install方法
// 针对Vue进行扩展

import PageTools from '@/components/PageTools'
import UploadExcel from '@/components/UploadExcel'
import ImageUpload from '@/components/ImageUpload'
import moment from 'moment'

export default {
  install (Vue, options) {
    // 形参是Vue构造函数
    Vue.prototype.$abc = 123

    // 扩展一个全局指令(当正常的图片加载失败时，显示默认图片)
    Vue.directive('imgerror', {
      inserted (el, bindings) {
        // el表示绑定该指令的DOM元素
        // bindings表示指令相关的信息 bindings.value
        // v-imgerror='a.png'
        // console.dir(bindings)
        // 如何判断图片加载失败了？基于img标签的onerror事件
        // 处理图片的路径是null的情况
        if (!el.src) el.src = bindings.value || options.default
        el.onerror = () => {
          // 需要给图片标签赋值一个默认的图片路径
          // 如果 bindings.value 值存在就用它，否则使用 options.default 值
          el.setAttribute('src', bindings.value || options.default)
        }
      },
      // 如果img的src的属性值是null,那么不会发送请求，也不会触发onerror事件
      // componentUpdated触发的条件：绑定指令的标签依赖的数据发生变更时
      componentUpdated (el, bindings) {
        el.setAttribute('src', el.src || bindings.value || options.default)
      }
    })

    // 扩展全局组件
    Vue.component(PageTools.name, PageTools)
    Vue.component(UploadExcel.name, UploadExcel)
    Vue.component(ImageUpload.name, ImageUpload)

    // 扩展全局过滤器：格式化时间
    Vue.filter('formatTime', (value) => {
      return moment(value).format('yyyy-MM-DD')
    })
  }
}
